<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>model</title>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">

</head>
<body>
<div id="app">

    <!--如果在路由中，使用查询字符串，给路由传递参数，则不需要修改路由规则的path属性-->
    <router-link to="/account">account</router-link>
    <router-view></router-view>


</div>
<template id="tmpl">
    <div>
        <h1>Account组件</h1>
        <router-link to="/account/login">登录</router-link>
        <router-link to="/account/register">注册</router-link>
        <router-view></router-view>
    </div>
</template>
<template id="tmpl-login">
    <h1>登录组件</h1>
</template>
<template id="tmpl-register">
    <h1>注册组件</h1>
</template>

</body>
<script>

    var account = {
        template: '#tmpl'
    };
    var login = {
        template: "#tmpl-login"
    };
    var register = {
        template: "#tmpl-register"
    };

    var router = new VueRouter({
        routes: [
            {path: '/', component: account},
            {
                path: '/account',
                component: account,
                // 使用children属性，实现子路由，子路由的path属性前面，不要带 '/' ，否则永远以根路径开始请求，这样不方便我们用户去理解URL地址
                children: [
                    {path: 'login', component: login},
                    {path: 'register', component: register}

                ]
            },

        ]
    });


    var vm = new Vue({
        el: '#app',
        data: {
            msg: '大家好哈哈哈哈，你们好啊。'
        },
        methods: {},
        router: router
    })



</script>
</html>